<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;list-style: none;}
			#box{width: 760px;height: 300px;position: relative;margin: 20px auto; overflow: hidden;}
			#pic ul li{width: 760px;height: 300px;position: relative;overflow: hidden;}
			#pic ul li .img1{position: absolute;left: 15px;top: 0;display: none;}
			#pic ul li .img2{position: absolute;left: -760px;top: 0;}
			#nav{width: 150px;height: 20px;position: absolute;bottom: 10px;left: 20px;}
			#nav ul li{width: 16px;height: 16px;border: 2px solid white;float: left;border-radius: 50%;margin: 0 5px;}
			#nav ul .bg{background: orange;}
		</style>
		<script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var i = -1;
				var timer = 0;
				move()
				
				function move(){
					i++;
					if(i > 4){
						i = 0;
					}
					$('#nav ul li').eq(i).addClass('bg').siblings().removeClass('bg');
					$('#pic ul li').eq(i).fadeIn(100).siblings().fadeOut(100);
					$('#pic ul li').eq(i).find('.img2').css('left','-760px');
					$("#pic ul li").eq(i).find(".img1").css({display:"none",left:"15px"});
					$('#pic ul li').eq(i).find('.img2').animate({left:0},500,function(){
						$("#pic ul li").eq(i).find(".img1").css('display','block').animate({left:'0px'},200);
					})
				}
				
				timer = window.setInterval(move,4000);
				
				$('#nav ul li').hover(function(){
					window.clearInterval(timer);
					i = $(this).index();
					$('#nav ul li').eq(i).addClass('bg').siblings().removeClass('bg');
					$('#pic ul li').eq(i).fadeIn(100).siblings().fadeOut(100);
					$('#pic ul li').eq(i).find('.img2').css('left','-760px');
					$('#pic ul li').eq(i).find('.img1').css({display:'none',left:'15px'});
					$('#pic ul li').eq(i).find('.img2').animate({left:0},500,function(){
						$("#pic ul li").eq(i).find(".img1").css('display','block').animate({left:'0px'},500);
					})
				},function(){
					timer = window.setInterval(move,4000);
				})
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<div id="pic">
				<ul>
					<li style="background: url(day5/img/bg1.jpg) no-repeat;">
						<img class="img1" src="day5/img/con1.png"/>
						<img class="img2" src="day5/img/text1.png"/>
					</li>
					<li style="background: url(day5/img/bg2.jpg) no-repeat;">
						<img class="img1" src="day5/img/con2.png"/>
						<img class="img2" src="day5/img/text2.png"/>
					</li>
					<li style="background: url(day5/img/bg3.jpg) no-repeat;">
						<img class="img1" src="day5/img/con3.png"/>
						<img class="img2" src="day5/img/text3.png"/>
					</li>
					<li style="background: url(day5/img/bg4.jpg) no-repeat;">
						<img class="img1" src="day5/img/con4.png"/>
						<img class="img2" src="day5/img/text4.png"/>
					</li>
					<li style="background: url(day5/img/bg5.jpg) no-repeat;">
						<img class="img1" src="day5/img/con5.png"/>
						<img class="img2" src="day5/img/text5.png"/>
					</li>
				</ul>
			</div>
			<div id="nav">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
				
	</body>
</html>
